<template>
    <div class="main_orderList">
        <div class="home_orderList"><router-link to="/goHome/{username}" class="router_orderList">回到首页</router-link></div>
        <el-card class="card_orderList">
            <el-table class="orderList" :data="orderList" height="600" border row-style="height: 50px">
                <el-table-column prop="orderid" label="orderId" class="column_orderList"></el-table-column>
                <el-table-column prop="linenum" label="lineNum" class="column_orderList"></el-table-column>
                <el-table-column prop="itemid" label="itemId"  class="column_orderList"></el-table-column>
                <el-table-column prop="quantity" label="quantity" class="column_orderList"></el-table-column>
                <el-table-column prop="unitprice" label="unitPrice" class="column_orderList"></el-table-column>
                <el-table-column prop="price" label="price" class="column_orderList"></el-table-column>
                <el-table-column label="查看订单" >
                    <template slot-scope="scope">
		                <router-link :to="{name:'OrderInfo', params:{id:scope.row.orderid}}">
		                    <span>详情</span>
		                </router-link>
	                </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios';
import { jwtDecode } from 'jwt-decode';

export default {
    name:   'OrderList',

    data() {
        return {
            token : localStorage.getItem('token'),
            username:jwtDecode(localStorage.getItem('token')).username,
            orderList: ''
        }
      },
      methods:{
        //使用结构赋值进行异常处理
		promise_error_process(promise){
			return promise.then(data=>[null,data])
							.catch(err=>[err,null])
		},
        // 发送ajax请求列表
        async getListByAjax() {
            const response = await axios({
                url: 'http://localhost:8081/orders',
                method: 'GET',
                withCredentials: true,
                headers: {
                'Authorization': this.token // 将token放在请求头中
                }
            })
            return response
        },
        async getList() {
            const [err, data] = await this.promise_error_process(this.getListByAjax()); // 调用getListByAjax函数
            console.log(this.token)
            if (err) {
                console.log("请求报错")
            } else {
                console.log(data.data.data)
                this.orderList = data.data.data
            }
        }
      },
    created() {
        this.getList(); // //在模版渲染成HTML之前赋值
    }
}
</script>

<style scoped>
.main_orderList{
    width: 100%;
    text-align: center;
}
.home_orderList{
    text-align: left;
    padding-top: 20px;
    font-size: 20px;
}
.home_orderList a{
    text-decoration:none;
    margin-left: 11%;
}
.card_orderList{
    margin-top: 15px;
    width: 80%;
    margin-left: 10%;
    padding: 20px;
}
.orderList{
    height: 100%;
    font-size: 20px;
    border: true;


}
</style>